  var map;
  var hull;
  var dispositivosposiciones = [];
  var dias="ultimo dia";
  var dispositivos=[];
  var allMarkers=[];
  //allmarkers es de dispositivos
  var allRoutes=[];
  //dispositivos tienen la lista de ids de los dispositivos que no quiero que se muestren en el mapa
  //falta hacer en onchange del checkbox para que vaya agregando aqui la lista de dispositivos conforme se va desmarcando
  var areas=[];
  var allAreas=[];
  var allAreasMarkers=[];
  //areas tienen la lista de ids de las areas que no quiero que se muestren en el mapa
  //falta hacer en onchange del checkbox para que vaya agregando aqui la lista de areas conforme se va desmarcando  
  var colors = [];
  //colors es de dispositivos, el de areas se puede sacar por su atributo
  
  function initialize() {

 	gpoly = null;
    var properties = {
      center: new google.maps.LatLng(-12.0647635506592, -77.07800),
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    map = new google.maps.Map(document.getElementById("map_canvas"), properties);
	 /*
	  * No quiero que marquen los puntos XD
	 google.maps.event.addListener(map, 'click', function(event) {
	    placeMarker(event.latLng);
	  });
	  */
    
    //aqui debo llamar a la pintada xD
    //nofunciona xq no tengo dispositivos y todaiva no hago el servlet.. ya ma;ana sera xD
    //positioningDevices();
    getAreas();
    getDevices();    
    
  }
  
  function positioningDevices(){
	  getPosicionesDispositivos();
	  
	  for (var d=0;  d<dispositivosposiciones.length ; d++){
	  	  var points = [];
	  	  var markers = dispositivosPosiciones[d].Posiciones;
	  	  //llenar los puntos
	  	  for( var i = 0 ; i < markers.length ; i++){
			points.push( new google.maps.LatLng( markers[i].Latitud,  markers[i].Longitud() ) );
	  		points[i].setMap(map);
	  		google.maps.event.addListener(point[i], "click", function()
	  	  			{
	  	  				marker.openInfoWindowHtml(
	  	  						'Esta posicion se registro para el dispositivo ' +dispositivosPosiciones[id].Nombre
	  	  						+ 'con Mac Address/Numero: ' +dispositivosPosiciones[id].MacAddress+' / '+dispositivosPosiciones[id].Numero
	  	  						+'. <br> La hora de este registro fue: '+ dispositivosPosiciones[id].DateTime);
	  	  			});
	  	  }
	  	  allMarkers.push(points);
	  	  var spath= new google.maps.Polyline({
			path: points,
	  		strokeColor: [d],
	  		strokeOpacity: 1.0,
	  		strokeWeight: 3
			});
		  spath.setMap(map);
		  allRoutes.push(spath);
	  }
  }
  
  function addDevice(idx){
	  //dispositivosposiciones = getPosicionesDispositivos();
  	  //llenar los puntos
	  var id = getDeviceIndexfromID(idx)+1;
  	  for( var i = 0 ; i < allMarkers[id].length ; i++){
  		allMarkers[id][i].setMap(map);
  	  }
  	  allRoutes[id].setMap(map);
  }
  
  function removeDevice(idx){
	  //dispositivosposiciones = getPosicionesDispositivos();
  	  //llenar los puntos
	  var id = getDeviceIndexfromID(idx);	  
  	  for( var i = 0 ; i < allMarkers[id].length ; i++){
  		allMarkers[id][i].setMap(null);
  	  }
  	  allRoutes[id].setMap(null);
  }  

  
  function addArea(idx){
	  //dispositivosposiciones = getPosicionesDispositivos();
  	  //llenar los puntos
	  /*
  	  for( var i = 0 ; i < allAreasMarkers[id].length ; i++){
  		allMarkers[id][i].setMap(map);
  	  }
  	  */
	  var id = getAreaIndexfromID(idx)+1;	  
	  allAreas[id-1].setMap(map);	  
  }

  function removeArea(idx){
	  var id = getAreaIndexfromID(idx)+1;	  
	  allAreas[id-1].setMap(null);
  }
  
  function getPosicionesDispositivos(){
	alert(0);
	var dias = 0;
	$.get(
			"../servlet/ServletPositions",
		    {"dias" : dias },
		    function(data) {
		    	alert(data);
		    	dispositivosposiciones = data;
		    	 
		    },
		    "json");
	
  }
  
  function getAreas(){

		$.get(
				"../servlet/ServletArea",
			    {"dias" : 0},
			    function(data) {
			    	areas = data;
			    	
			    	 for (var a=0;  a<areas.length ; a++){
					  	  var points = [];
					  	  //alert(areas[a]["Puntos"]);
					  	  var markers = areas[a]["Puntos"];
					  	  var t_puntos = new Array();
					  	  for( var i = 0 ; i < markers.length ; i++){
					  		   t_puntos[i] = new Point();
					  		   t_puntos[i].setPoint( markers[i]["Latitud"],  markers[i]["Longitud"]);
					  		   points.push( new google.maps.LatLng( markers[i]["Latitud"],  markers[i]["Longitud"]) );
					  	  }
					  	  
					  	  //allAreasMarkers.push(points); -> como no estoy mostrando los puntos no necesito hacer una lista de los puntos para eliminarlos
					  	  
						  var center = getCenterMass( t_puntos );
						  
					  	  //seria interesante poner un  
					  	  var gpoly = new google.maps.Polygon({
					  		  paths: points,
					  		  strokeColor: areas[a]["Color"],
					  		  strokeOpacity: 0.8,
					  		  strokeWeight: 2,
					  		  fillColor: areas[a]["Color"],
					  		  fillOpacity: 0.35
					  	  });
					  	  
					  	  gpoly.setMap(map);
					  	  allAreas.push(gpoly);
					  }
			    	
			    },
			    "json");

	  }

  function getDevices(){

		$.get(
				"../servlet/ServletPositions",
			    {"dias" : 0},
			    function(data) {
			    	  dispositivosposiciones = data;			    	
				  	  for (var d=0;  d<dispositivosposiciones.length ; d++){
					  	  var points = [];
					  	  var markers = dispositivosPosiciones[d]["Posiciones"];
					  	  //llenar los puntos
					  	  for( var i = 0 ; i < markers.length ; i++){
					  		points.push( new google.maps.LatLng( markers[i]["Latitud"],  markers[i]["Longitud"]) );
					  		points[i].setMap(map);
					  		google.maps.event.addListener(point[i], "click", function()
					  	  			{
					  	  				marker.openInfoWindowHtml(
					  	  						'Esta posicion se registro para el dispositivo ' +dispositivosPosiciones[id].Nombre
					  	  						+ 'con Mac Address/Numero: ' +dispositivosPosiciones[id].MacAddress+' / '+dispositivosPosiciones[id].Numero
					  	  						+'. <br> La hora de este registro fue: '+ dispositivosPosiciones[id].DateTime);
					  	  			});
					  	  }
					  	  allMarkers.push(points);
					  	  var spath= new google.maps.Polyline({
							path: points,
					  		strokeColor: [d],
					  		strokeOpacity: 1.0,
					  		strokeWeight: 3
							});
						  spath.setMap(map);
						  allRoutes.push(spath);
					  }
			    },
			    "json");

	  }  
  
  function toJSON(arr) {
	    var res = [];
	    var isCollection = (Object.prototype.toString.apply(arr) === '[object Array]');
	    

	    for(var key in arr) {
	    	var value = arr[key];
	    	if (typeof value == "function") continue;
	        if(typeof value == "object") { 
	            if(isCollection) res.push(toJSON(value));
	            else res[key] = toJSON(value); 
	        } else {
	            var str = "";
	            if(!isCollection) str = '"' + key + '":';
	            if(typeof value == "number") str += value;
	            else if(value === false) str += 'false'; 
	            else if(value === true) str += 'true';
	            else str += '"' + value + '"'; 
	            res.push(str);
	        }
	    }
	    var json = res.join(",");
	    
	    if(isCollection) return '[' + json + ']';
	    return '{' + json + '}';
	}
  
  
  function pathing(){
	  
  	var points = [];
		for( var i = 0 ; i < markersRuta.length ; i++){
			
			points.push( new google.maps.LatLng( markersRuta[i].position.lat(),  markersRuta[i].position.lng() ) );
		}
		
		var color =  $('#color2').val(); 
		var spath= new google.maps.Polyline({
		path: points,
  		strokeColor: color,
  		strokeOpacity: 1.0,
  		strokeWeight: 3
		});
		spath.setMap(ruta);
		

    }
      
   function cleanPoints(){
	   for( var i = 0 ; i < markers.length ; i++){
		   markers[i].setMap(null);
	   }
	   markers.length = 0;
	   setMapPosition();
   }
   
   function getDeviceIndexfromID(id){

	   for (var i = 0; i < dispositivosposiciones.length; i++){
		   if (dispositivosposiciones[i]["DispositivoId"] == id) return i;
	   }
	   return -1;
	   
   }

   function getAreaIndexfromID(id){

	   for (var i = 0; i < areas.length; i++){
		   if (areas[i]["AreaId"] == id) return i;
	   }
	   return -1;
   }